import DataCard from '../../modules/DataCard'
export default {
  components: {DataCard},
  data: function () {
    return {
      value13: '',
      statisticData: [{
        type: '安全监控',
        device: 126560,
        online: 25460,
        stop: 1100,
        warning: 387
      }, {
        type: '环境监控',
        device: 126560,
        online: 25460,
        stop: 1100,
        warning: 387
      }, {
        type: '建筑监控',
        device: 126560,
        online: 25460,
        stop: 1100,
        warning: 387
      }, {
        type: '动力监控',
        device: 126560,
        online: 25460,
        stop: 1100,
        warning: 387
      }, {
        type: '排放监控',
        device: 126560,
        online: 25460,
        stop: 1100,
        warning: 387
      }],
      childrenData: [{
        type: '视频监控',
        device: 126560,
        online: 25460,
        stop: 1100,
        warning: 387
      }, {
        type: '门禁监控',
        device: 126560,
        online: 25460,
        stop: 1100,
        warning: 387
      }, {
        type: '入侵监控',
        device: 126560,
        online: 25460,
        stop: 1100,
        warning: 387
      }],
      cameraData: [{
        src: require('../../../assets/u3505.jpg'),
        text: '冲压1号摄像机',
        follow: true
      }, {
        src: require('../../../assets/u3505.jpg'),
        text: '冲压2号摄像机',
        follow: true
      }, {
        src: require('../../../assets/u3505.jpg'),
        text: '冲压3号摄像机',
        follow: true
      }, {
        src: require('../../../assets/u3505.jpg'),
        text: '冲压4号摄像机',
        follow: true
      }, {
        src: require('../../../assets/u3505.jpg'),
        text: '冲压5号摄像机',
        follow: true
      }, {
        src: require('../../../assets/u3505.jpg'),
        text: '冲压6号摄像机',
        follow: true
      }, {
        src: require('../../../assets/u3505.jpg'),
        text: '冲压7号摄像机',
        follow: true
      }, {
        src: require('../../../assets/u3505.jpg'),
        text: '冲压8号摄像机',
        follow: true
      }],
      followDatas: [],
      childrenItemShow: false,
      parentItemType: '',
      dragObj: {}
    }
  },
  mounted: function () {
    this.loadFollowDatas()
    if (this.$store.state.spaces.length === 0) {
        this.loadInitSpacesData()
    }
    if (this.$store.state.selections.length === 0) {
        this.loadDictsOptions()
    }
  },
  methods: {
    loadFollowDatas: function () {
      let that = this
      window.myapi.follow_devs().then(function (resp) {
        if (resp.status === 200 && resp.data.status === 200) {
          that.followDatas = resp.data.data
            console.info('dddd222', that.followDatas)
        } else {
          this.$Message.info('返回数据异常！')
        }
      }).catch(function (e) {
          this.$Message.warn(e)
      })
    },
    loadInitSpacesData () {
      // 加载空间数据
      window.myapi.space_tree().then(res => {
        if (res.data.status === 200) {
          this.$store.commit('addSpaces', res.data.data)
        } else {
          this.$Message.error(res.data.msg)
          console.warn('加载数据有误：', res.data.msg)
        }
      }).catch(function (e) {
        console.log('catch wrong ,,,,,,,,')
      })
    },
    loadDictsOptions () {
      // 加载选项的数据
      window.myapi.dict_opts().then(res => {
        if (res.data.status === 200 && res.data.status === 200) {
          this.$store.commit('addOpts', res.data.data)
        } else {
          this.$Message.error(res.data.msg)
        }
      }).catch(function (e) {
        console.log('catch wrong ,,,,,,,,')
      })
    },
    // 父item单击[card父点击，子card展示]
    parentClick: function (item) {
      let self = this
      if (self.parentItemType === item.type) {
        self.childrenItemShow = !self.childrenItemShow
      } else {
        self.childrenItemShow = true
      }
      self.parentItemType = item.type
    },
    // 关注
    follow: function (index) {
      let self = this
      self.cameraData[index].follow = !self.cameraData[index].follow
    },
    // 拖动什么
    drag: function (ev) {
      if (ev.target.id) {
        let dragIndex
        let idStr = ev.target.id
        if (idStr.indexOf('idCameraImg') > -1) {
          dragIndex = idStr.replace('idCameraImg', '')
        } else if (idStr.indexOf('idCameraText') > -1) {
          dragIndex = idStr.replace('idCameraText', '')
        } else {
          dragIndex = idStr.replace('idCamera', '')
        }
        console.log('dragIndex----' + dragIndex)
        ev.dataTransfer.setData('dragIndex', dragIndex)
      }
    },
    // 放到何处
    allowDrop: function (ev) {
      ev.preventDefault()
    },
    // 进行放置
    drop: function (ev) {
      let self = this
      // ev.preventDefault()
      let dragIndex = ev.dataTransfer.getData('dragIndex')
      if (ev.target.id) {
        let dropIndex
        let idStr = ev.target.id
        if (idStr.indexOf('idCameraImg') > -1) {
          dropIndex = idStr.replace('idCameraImg', '')
        } else if (idStr.indexOf('idCameraText') > -1) {
          dropIndex = idStr.replace('idCameraText', '')
        } else {
          dropIndex = idStr.replace('idCamera', '')
        }
        console.log('dropIndex----' + dropIndex)
        self.translateCamera(dropIndex, dragIndex)
      }
    },
    // 交换拖动的camera数据
    translateCamera: function (dropIndex, dragIndex) {
      // console.log('dropIndex--' + dropIndex + '---dragIndex--' + dragIndex)
      let self = this
      let dropI = parseInt(dropIndex)
      let dragI = parseInt(dragIndex)
      let dragTem = JSON.parse(JSON.stringify(self.cameraData[dragI]))
      let dropTem = JSON.parse(JSON.stringify(self.cameraData[dropI]))
      self.cameraData.splice(dragI, 1, dropTem)
      self.cameraData.splice(dropI, 1, dragTem)
    },
    // 大数字 千分位显示
    numberShow: function (number) {
      if (number) {
        return (number).toLocaleString('en-US')
      } else {
        return number
      }
    }
  }
}
